import React, { useState, useEffect, use } from 'react'
import { Button, DatePicker, Form, message, Menu } from 'antd';
import Company from './Company'
import ServerParameters from './ServerParameters'
import moment from 'moment';
import ReportSettings from './ReportSettings'
import System from './System'
import MqttSet from './MqttSet'
import HttpSet from './HttpSet'
import TakeNumber from './TakeNumber'
import { security_CompanyGetMsg } from '../service'
import dayjs from 'dayjs';
import { updateShops } from "../service"
const SetTime = () => {
    const [now, setNow] = useState(moment());
    useEffect(() => {

        const timer = setInterval(() => setNow(moment()), 1000); // 每秒更新
        return () => clearInterval(timer);                     // 组件卸载时清理
    }, []);
    return (
        <>

            <div style={{ marginTop: '3vh' }}>
                <div
                    style={{ fontSize: '20px', fontWeight: '550', margin: "30px" }}
                >设置服务器时间
                </div>
                <DatePicker
                    showTime
                    value={now}                 // 受控，实时显示当前时间
                    onChange={(value, dateString) => {
                        console.log('Selected Time: ', value);
                        console.log('Formatted Selected Time: ', dateString);
                    }}
                    style={{ width: 300, marginLeft: '40px' }}
                /> &emsp;
                <Button
                    type="primary"
                >
                    确定
                </Button>
            </div>
        </>
    )
}




const CompanyParameter = () => {


    const [selectedKeys, setSelectedKeys] = useState(['security'])


    const items = [
        { key: 'security', label: '公司参数' },
        { key: 'ServerParameters', label: '服务器参数配置' },
        { key: 'ReportSettings', label: '上报信息设置' },
        { key: 'System', label: '系统参数设置' },
        { key: 'MqttSet', label: 'Mqtt参数配置' },
        { key: 'HttpSet', label: 'Http参数配置' },
        { key: 'TakeNumber', label: '自助取号配置' },
        { key: 'Partition', label: '设置服务器时间' }
    ];
    // 公司参数
    const [securityMsg, setSecurityMsg] = useState({})
    // mqtt参数
    const [Mqtt, setMqtt] = useState({})
    // http参数
    const [Http, setHttp] = useState({})
    // 系统参数
    const [system_config, setsystem_config] = useState({})
    // 上传参数
    const [upload_config, setupload_config] = useState({})
    // 自动分配参数
    const [auto_assign_config, setauto_assign_config] = useState({})


    const GetMsg = () => {



        security_CompanyGetMsg().then(({ data }) => {
            console.log(data)
            setSecurityMsg({ name: data.name, ID: data.client_id, validity: dayjs(data.validity).format('YYYY-MM-DD HH:mm:ss') })

            console.log(JSON.parse(data.mqtt_config));

            setMqtt(JSON.parse(data.mqtt_config))

            setHttp(JSON.parse(data.http_config))

            setsystem_config(JSON.parse(data.system_config))

            setupload_config(JSON.parse(data.upload_config))

            setauto_assign_config(JSON.parse(data.auto_assign_config))
        })




    }

    useEffect(() => {
        GetMsg()
    }, [])

    const Update = (key, value) => {

        updateShops({ [key]: value }).then(res => {
            console.log(res);
            if (res.code === 0) {
                message.success('保存成功');
                GetMsg()
            } else {
                message.error(res.msg);
            }
        });
    };

    return (
        <div>

            <div style={{ width: 210, float: 'left', height: 550 }}>
                <Menu
                    mode="inline"
                    selectedKeys={selectedKeys}
                    style={{ border: 'none', height: "calc(92vh - 100px)" }}
                    onSelect={({ selectedKeys }) => {

                        setSelectedKeys(selectedKeys)
                    }}
                    items={items}
                >
                </Menu>
            </div>
            <div style={{ float: 'right', width: 'calc(100% - 215px)', height: "calc(92vh - 100px)", background: '#fff', boxSizing: 'border-box' }}>
                {selectedKeys[0] === 'security' && <Company securityMsg={securityMsg} />}
                {selectedKeys[0] === 'ServerParameters' && <ServerParameters />}
                {selectedKeys[0] === 'Partition' && <SetTime />}
                {selectedKeys[0] === 'ReportSettings' && <ReportSettings Update={Update} upload_config={upload_config} />}
                {selectedKeys[0] === 'System' && <System Update={Update} system_config={system_config} />}
                {selectedKeys[0] === 'MqttSet' && <MqttSet Update={Update} Mqtt={Mqtt} />}
                {selectedKeys[0] === 'HttpSet' && <HttpSet Update={Update} Http={Http} />}
                {selectedKeys[0] === 'TakeNumber' && <TakeNumber Update={Update} auto_assign_config={auto_assign_config} />}
            </div>

        </div>
    )
}

export default CompanyParameter

